<template>
  <div class="app-container">
    <div class="form-container">
          <el-form ref="searchForm" :model="searchForm" label-width="80px">
            <el-row :gutter="20">
                <el-col :span="6">
                    <el-form-item label="产品名称" prop="proName">
                        <el-input v-model="searchForm.proName" placeholder="请输入产品名称"/>
                    </el-form-item>
                </el-col>
                <el-col :span="6">
                    <el-form-item label="供应商" prop="supName">
                        <el-input v-model="searchForm.supName" placeholder="请输入供应商名称"/>
                    </el-form-item>
                </el-col>
                  <el-col :span="6">
                    <el-form-item label="创建人" prop="useName">
                        <el-input v-model="searchForm.useName" placeholder="请输入创建人名称"/>
                    </el-form-item>
                </el-col>
                <el-col :span="6">
                  <el-button icon="el-icon-search" type="primary" circle @click="getData" />
                  <el-button icon="el-icon-refresh-right" type="warning" size="medium" round @click="resetForm('searchForm')">
                      重置
                    </el-button>
              </el-col>
            </el-row>
        </el-form>
    </div>

    <el-table stripe border fit highlight-current-row
    :header-cell-style="{textAlign: 'center'}"
     :cell-style="{ textAlign: 'center' }"
    :data="storeManages.slice((page - 1) * limit, page * limit)" style="width: 100%">
    
      <el-table-column type="expand">
        <template slot-scope="props">
          <el-form label-position="left" inline class="table-expand">

            <el-form-item label="创建人ID">
              <span>{{ props.row.user.id }}</span>
            </el-form-item>
            <el-form-item label="创建人姓名">
              <span>{{ props.row.user.username }}</span>
            </el-form-item>
            <el-form-item label="创建人性别">
              <span>{{ props.row.user.sex == 0 ? '男': '女'}}</span>
            </el-form-item>

            <el-form-item label="创建人邮箱">
              <span>{{ props.row.user.email }}</span>
            </el-form-item>
            <el-form-item label="角色类型">
              <span>{{ props.row.user.role.name }}</span>
            </el-form-item>
              <el-form-item label="创建人手机">
              <span>{{ props.row.user.phoneNum }}</span>
            </el-form-item>
            <el-form-item label="创建人状态">
              <span>{{ props.row.user.isEnable == 0 ? '禁用': '正常'}}</span>
            </el-form-item>
          </el-form>
        </template>
      </el-table-column>

      <el-table-column label="ID" prop="id" width="60"/>
      <el-table-column label="产品名" prop="product.name" min-width="140"/>
      <el-table-column label="价格" prop="product.price" width="60"/>
      <el-table-column label="供应商" prop="supplier.name" min-width="140"/>
      <el-table-column label="供应商地址" prop="supplier.address" min-width="140"/>
      <el-table-column label="创建人" prop="user.username"/>
      <el-table-column label="数量" prop="num" width="60"/>
      
      <el-table-column label="总费用(元)" width="100">
        <template slot-scope="scope">
          <span>{{ scope.row.num  *  scope.row.product.price }}</span>
        </template>
      </el-table-column>

      <el-table-column label="创建时间" prop="createTime" min-width="90">
        <template slot-scope="scope">
          <i class="el-icon-time"></i>
          <span style="margin-left: 5px">{{ $dayjs(scope.row.createTime).format('YYYY-MM-DD') }}</span>
        </template>
      </el-table-column>

      <!-- <el-table-column label="操作"  min-width="120px">
          <template slot-scope="scope">
            <el-button type="success" title="通过" icon="el-icon-check" size="small" circle @click="handleCheck(scope.row,1)"/>
            <el-button type="danger"  title="拒绝" icon="el-icon-close" size="small" circle @click="handleCheck(scope.row,2)"/>
          </template>
      </el-table-column> -->
    </el-table>
    <pagination v-show="total > 0" :total="total" :page.sync="page" :limit.sync="limit" @pagination="getData"/>
  </div>

</template>

<script>
import Pagination from "@/components/Pagination";



export default {
  components: { Pagination },
  data() {
    return {
      storeManages:[],
      total: 0,
      listLoading: true,
      page: 1,
      limit: 5,
      searchForm: {
        proName: "",
        supName:"",
        useName:'',
        isIn: 0, // 写死 0 代表入库订单操作
        isCheck:2, // 写死 0  未验证的 订单 即提交的订单
      },
    };
  },
  methods: {
    async getData() {
      let res = await this.$store.dispatch('storeManage/getList',this.searchForm) 
      if(res.code == 1) {
          console.log(res.data);
          this.storeManages = res.data 
          this.total = this.storeManages.length 
      }else{
          this.$message({ showClose: true,message: res.msg, type: 'error'})
      }
    },
    // handleCheck({id},isCheck){

    //     // 状态 0 是入库 1 是出库
    //     /**
    //         isCheck 验证状态
    //         0 未验证的 订单 即提交的订单
    //         1 验证通过的订单 需要入库 或出口
    //         2 验证不通过的订单 
    //     */

    //   let msg = isCheck == 1 ? '验证通过':'拒绝通过'
    //   this.$confirm("此操作将 "+msg+" ID为 "+ id +"的订单, 是否继续?", "提示", {
    //     confirmButtonText: "确定",
    //     cancelButtonText: "取消",
    //     type: "warning"
    //   })
    //   .then(async () => {
      
    //       const res = await this.$store.dispatch('storeManage/isCheck',{id,isCheck}) 
    //       if(res.code == 1) {
    //         // 数据库的 ischeck 修改成功 将表格的数据删除这一行
    //         // 根据 id 寻找数据在 数组中的 下标
    //         const index = this.storeManages.map(item => item.id).indexOf(id)
    //         // 删除这一行
    //         this.storeManages.splice(index,1)
    //         // 数组长度减 1 动态绑定到分页器
    //         this.total--;
    //         this.$message({ type: "success",  message: msg+res.msg, duration: 1000});
    //       }else{
    //         this.$message({ type: "error",  message: msg+res.msg, duration: 1000});
    //       }
    //   })
    //   .catch(() => {
    //     this.$message({ type: "info", message: "已取消操作"});
    //   });
    // },
    resetForm(searchForm) {
      this.$refs[searchForm].resetFields()
      this.$message({ showClose: true, message: '清空成功', type: 'success' })
    }
  },
  mounted() {
    this.getData();
  }
};
</script>

<style lang="scss" scoped>
  .form-container {
    display: flex;
    width: 100%;
    align-items:center;
    justify-content:center;
    margin-bottom: 10px;
  }
  .search {
    width: 100%;
    text-align: center;
    padding-left: 20px;
  }
  .search-more {
    width: 100%;
  }
  .table-expand {
    font-size: 0;
  }
  .table-expand label {
    width: 90px;
  }
  .table-expand .el-form-item {
    margin-right: 0;
    margin-bottom: 0;
    width: 50%;
  }
</style>
